<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<c:set var="left" value="0" />
			<style>
				table {
					margin-bottom: 10px;
				}
				
				th.ui-datepicker-week-end,
				td.ui-datepicker-week-end {
					display: none;
				}
				
				#ui-datepicker-div { font-size: 11px; }
				.ui-datepicker-trigger { cursor: pointer }
			</style>
			<div class="container boxed container-first clearfix">
				<div class="grid-3">
					<img src="<c:url value="/resources/images/clinicCustom.jpg" />" />
				</div>
				<div class="grid-9">
					<p style="text-align: justify">
						O sistema OpenClinic &eacute; uma solu&ccedil;&atilde;o de c&oacute;digo-fonte aberto, por isso permite a qualquer cl&iacute;nica ter um software de gest&atilde;o suportado por uma enorme comunidade de desenvolvedores, facilidade de aprimoramento e baixo custo.
					</p>
					<p style="text-align: justify">
						A aplica&ccedil;&atilde;o pode ser o canal de comunica&ccedil;&atilde;o com Clientes, permitindo f&aacute;cil acesso &agrave;s informa&ccedil;&otilde;es de contato e disponbilidade de atendimento, o que ir&aacute; facilitar e agilizar o atendimento. Para os colaboradores &eacute; uma ferramenta que informatiza diversas de suas rotinas, como a carteira de Clientes, marca&ccedil;&atilde;o de consultas, acompanhamento clinico entre outras. 
					</p>
				</div> 
			</div>
			<div class="container-title">
				<h4>Disponibilidade de Hor&aacute;rios</h4>
			</div>
			<div class="container boxed clearfix">
				<div class="grid-12">
					<div class="scheduleActionbar">
						<form style="margin-bottom: 0">
							<b><spring:message code="specialty" />:</b>
							<form:select path="specialtyList" id="specialtyId" cssStyle="margin-right: 10px; width: 215px">
								<form:options items="${specialtyList}" itemValue="specialtyId" itemLabel="name" />
							</form:select>
	
							<b><spring:message code="professional" />:</b>
							<select class="required" id="professionalId" style="width: 215px">
								<option value="">Carregando...</option>
							</select>
							<span style="float: right">&nbsp; 
								<input type="hidden" id="dp" />
							</span>
						</form>
					</div>
					<div class="openClinicCalendarContainer" style="height: ${(endHour - startHour + 1) * 23 + 23}px">
						<div class="openClinicCalendarHeader">
							<c:forEach begin="1" end="5">
								<div class="openClinicHeaderCell" style="left: ${left}px; width: 180px;"></div>
								<c:set var="left" value="${left + 181}" />
							</c:forEach>
						</div>
						<div class="openClinicCalendarData" style="height: ${(endHour - startHour + 1) * 23}px">
							<c:set var="left" value="41" />
							<c:forEach begin="1" end="5" varStatus="loopIndex">
								<div class="openClinicCalendarDataHolder" style="left: ${left}px; height: ${(endHour - startHour + 1) * 23}px; width: 180px;<c:if test="${loopIndex.index == 5}"> border-right: 1px solid #CECECE;</c:if>"></div>
								<c:set var="left" value="${left + 181}" />
							</c:forEach>
							<div class="openClinicCalendarDataHolder" style="border-right: 1px solid #CECECE;">
							<c:forEach var="hour" begin="${startHour}" end="${endHour}">
								<div class="openClinicCalendarHour">${hour}h</div>
							</c:forEach>
							</div>						
						</div>
					</div>
				</div>
			</div>
			<div class="container-title">
				<h4>Localiza&ccedil;&atilde;o e Contato</h4>
			</div>
			<div class="container boxed container-about container-last clearfix">
				<div class="grid-8">
				<c:if test="${not clinic.offlineMode}">
					<div id="google-map" data-latitude="${clinic.latitude}" data-longitude="${clinic.longitude}" style="width: 620px; height: 300px;"></div>
				</c:if>
				<c:if test="${clinic.offlineMode}">
					<img src="<c:url value='/resources/images/offlinemap.gif' />" />
				</c:if>
				</div>
				<div class="grid-4">
					<div class="sidebar-inner">
						<div class="widget">
							<h4 class="widget-title site-title">Atendimento</h4><div class="underline"></div>
							
							<address>
								<strong>Hor&aacute;rio:</strong><br/>
								De segunda &agrave; sexta-feira<br />
								Entre ${clinic.morningStartTime} e ${clinic.morningEndTime}<br />
								Entre ${clinic.afternoonStartTime} e ${clinic.afternoonEndTime}
							</address>
							
							<address>
								<strong>Endere&ccedil;o:</strong><br/>
								${clinic.address.replaceAll("\\n", "<br />")}
							</address>
							
							<address>
								<strong>Telefone</strong><br>
								${clinic.phone}
							</address>
						</div>
					</div>
				</div>
			</div>